<template>
  <div class="head-container">
    <el-input
      v-model="cateName"
      maxlength="200"
      placeholder="请输入目录名称"
      clearable
      size="small"
      prefix-icon="Search"
      style="margin-bottom: 20px"
    />
  </div>
  <div class="tree-container">
    <el-tree
      ref="deptTreeRef"
      :data="props.cateOptions"
      :props="{ label: 'categoryName', children: 'children' }"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :render-content="renderContent"
      :highlight-current="true"
      default-expand-all
      :node-key="nodeKey"
      :current-node-key="currentNodeKey"
      @node-click="editCategory"
    >
    <!-- <el-tree
      ref="deptTreeRef"
      :data="props.cateOptions"
      :props="{ label: 'categoryName', children: 'children' }"
      :expand-on-click-node="false"
      :filter-node-method="filterNode"
      :render-content="renderContent"
      :highlight-current="true"
      default-expand-all
      :node-key="nodeKey"
      :current-node-key="currentNodeKey"
      @node-click="editCategory"
    > -->
    </el-tree>
  </div>
</template>

<script setup name="categoryTree">
import CateTitle from './cateTitle.vue'
import Add from './add.vue'
import Edit from './edit.vue'
import Delete from './delete.vue'
import { getLength } from '@/utils'
const { proxy } = getCurrentInstance()

const emits = defineEmits(['getList', 'add', 'edit', 'nodeClick', 'delete'])
const props = defineProps({
  categoryName: {
    type: String,
    default: () => {
      return ''
    },
  },
  cateOptions: {
    type: Array,
    default: () => {
      return []
    },
  },
  nodeKey: {
    type: String,
    default: () => {
      return 'id'
    },
  },
  currentNodeKey: {
    type: String,
    default: () => {
      return ''
    },
  },
})
const _categoryName = computed(() => props.categoryName)
const cateName = ref('')

/** 根据名称筛选部门树 */
watch(cateName, (val) => {
  proxy.$refs['deptTreeRef'].filter(val)
})
watch(props.currentNodeKey, (val) => {
  console.log(val)
})

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true
  console.log(data)
  console.log(data.categoryName)
  console.log('data=======')
  return data.categoryName.indexOf(value) !== -1
}

function removeCategory(data) {
  emits('delete', data)
}

/** 节点单击事件 */
function handleNodeClick(data) {
  emits('nodeClick', data)
}

function editCategory(data) {
  emits('edit', proxy.$fn.deepClone(data))
}

function addCategory(data) {
  emits('add', data)
}

// 分类名称长度超过23个字节显示tooltip提示
const bitLength = 23
function isShowTooltip(categoryName) {
  return getLength(categoryName) < bitLength
}

function renderContent(h, { node, data, store }) {
  const showTooltip = isShowTooltip(node.label)
  data.showTooltip = showTooltip
  return h(
    'span',
    {
      //这里添加hover事件
      onMouseenter: () => {
        //data.is_show = true
      },
      //鼠标离开
      onMouseleave: () => {
       //data.is_show = false
      },
    },
    [
      h('span', {}, [
        h(CateTitle, {
          data,
          showTooltip,
          categoryName: node.label,
          onAdd: (data) => {
            addCategory(data)
          },
          onEdit: (data) => {
            editCategory(data)
          },
          onDelete: (data) => {
            removeCategory(data)
          },
        }),
      ]),
      h(
        'span',
        {
          class: 'btn-box',
          style: {
            // 当显示tooltip的时候后面操作按钮不同时显示
            //display: data.is_show && data.showTooltip ? '' : 'none',
            display: data.is_show ? '' : 'none',
          },
        },
        [
          //编辑
          h(
            'el-button',
            {
              style: {
                marginLeft: '15px',
                color: '#a4da89',
              },
              onClick: (e) => {
                editCategory(data)
                e.stopPropagation()
              },
            },
            [h(Edit)]
          ),
          //添加
          h(
            'el-button',
            {
              style: {
                marginLeft: '5px',
                color: '#409eff',
              },
              onClick: (e) => {
                addCategory(data)
                e.stopPropagation()
              },
            },
            [h(Add)]
          ),
          //删除
          h(
            'el-button',
            {
              style: {
                marginLeft: '5px',
                color: 'red',
              },
              onClick: (e) => {
                removeCategory(data)
                e.stopPropagation()
              },
            },
            [h(Delete)]
          ),
        ]
      ),
    ]
  )
}
</script>

<style scoped lang="scss">
:deep(.el-tree-node__content) {
  > span {
    width: 100%;
    display: flex;
    align-items: center;
  }
}
:deep(.el-tree-node__content) {
  .btn-box {
    position: absolute;
    right: 5px;
  }
}
.tree-container {
  max-height: calc(100vh - 160px);
  overflow-y: scroll;
}
</style>
